How to hide HTML element with JavaScript?

#How to hide HTML element with JavaScript?| 来源: 网络整理| 查看: 265

How to hide HTML element with JavaScript? JavascriptObject Oriented ProgrammingFront End Technology

In this tutorial, we will learn how to hide HTML element with JavaScript.

Hiding an HTML element can be performed in different ways in JavaScript. In this tutorial, we will see the three most popular ways of doing it −

Using the hidden property Using the style.display property Using the style.visibility property

Generally, we use the hidden attribute to hide a particular element. We can toggle between hiding and showing the element by setting the hidden attribute value to true or false, respectively.

In the other two ways, we use the style object of the element. We have two properties in the style object to hide the HTML element, one is the display, and another one is the visibility.

In JavaScript, we can use both of these properties to hide the HTML elements, but the main difference between these two is when we use style.visibility property, then the specific tag is not visible, but the space of the tag is still allocated. Whereas in style.display property, not only is the tag hidden but also there is no space allocated to that element.

Using the hidden property

In JavaScript, the hidden property of an element is used to hide an element. We set the hidden properties value to true to hide the element.

Syntax

Following is the syntax to use hidden property −

document.getElementById('element').hidden = true

In the above syntax, 'element' is the id of an HTML element, and by using document.getElementById() method, we are accessing the element and changing its hidden property to true to hide the element.

Example

In the below example, we have used the hidden property to hide a div element using JavaScript.

Click the below buttons to hide or show this text. Hide Element Show Element function hide() { document.getElementById('dip').hidden = true } function show() { document.getElementById('dip').hidden = false } Using the style.display property

In JavaScript, style.display property is also used to hide the HTML element. It can have values like 'block', 'inline', 'inline-block', etc., but the value used to hide an element is 'none'. Using JavaScript, we set the style.display property value to ‘none’ to hide html element.

Syntax

Following is the syntax to hide HTML elements using style.display property in JavaScript.

document.getElementById('element').style.display = 'none'

In the above syntax, ‘element’ is the id of an HTML element, and by using document.getElementById() method, we are accessing the element and changing its style.display property to ‘none’ to hide the element.

Example

In the below example, we have used the style.display property to hide a div element using JavaScript.

#myDIV { width: 630px; height: 300px; background-color: #F3F3F3; } Click the "Hide Element" button to hide the div element. Hide Element Hello World! This is DIV element function hide() { document.getElementById('myDIV').style.display = 'none' } Using the style.visibility property

In JavaScript, style.visibility property is also used to hide the HTML element. It can have values like ‘visible,’ ‘collapse,’ ‘hidden’, ‘initial’ etc., but the value used to hide an element is ‘hidden’. Using JavaScript, we set the style.visibility property value to ‘hidden’ to hide html element.

Syntax

Following is the syntax to hide HTML elements using style.visibility property in JavaScript −

document.getElementById('element').style.visibility = 'hidden'

In the above syntax, ‘element’ is the id of an HTML element, and by using document.getElementById() method, we are accessing the element and changing its style.visibility property to ‘hidden’ to hide the element.

Example

In the below example, we have used the style.visibility property to hide element using JavaScript.

#dip { width: 630px; height: 300px; background-color: #F3F3F3; } Click the "Hide Element" button to hide the div element. Hide Element Show Element Hello World! This is DIV element function hide() { document.getElementById('dip').style.visibility = 'hidden'; } function show() { document.getElementById('dip').style.visibility = 'visible'; }

In the above output, users can see the element is hidden using style.visibility property, but the element still occupies its space in the browser.

In this tutorial, we learned three ways to hide an element using JavaScript. The first approach was to use the hidden property of an element. The next was to set style.display property to ‘hidden’. The third method was to set style.visibility property to ‘hidden’.

Shubham Vora

Updated on: 10-Sep-2023

27K+ Views

Related ArticlesHow to Hide an HTML Element by Class using JavaScript? How to display HTML element with JavaScript? How to hide/show HTML elements in JavaScript? How to Hide an HTML Element in Mobile View using jQuery? Add oninput attribute to HTML element with JavaScript? How can I show and hide an HTML element using jQuery? How to create a draggable HTML element with JavaScript and CSS? How to replace an HTML element with another one using JavaScript? How to Hide Password in HTML? How to hide span element if anchor href attribute is empty using JavaScript? Hide an element from view with CSS How to add many Event Handlers to the same element with JavaScript HTML DOM? Replace HTML div into text element with JavaScript? How to hide scrollbars with CSS? How to add a new element to HTML DOM in JavaScript? Kickstart Your Career

Get certified by completing the course

Get Started